import { NavBar, Icon, Toast } from "antd-mobile";
import { useState, useEffect } from "react";
import {withRouter } from "dva/router";
import { connect } from "dva";
import { Carousel, Tag } from "antd-mobile";
const Detail = ({ content, dispatch, history }) => {
  const { proDetail, backflag } = content;
  const [imgHeight, setHeight] = useState("250px");
  const [pro, setPro] = useState(proDetail ? proDetail : {});
  useEffect(() => {
    if (proDetail.pics) {
      Toast.hide();
    }
    setPro(proDetail);
  }, [proDetail]);
  const goBack = () => {
    if (backflag === 1) {
      history.push("/");
    } else {
      history.push("/query");
    }
  };
  return (
    <div>
      <NavBar
        style={{
          position: "fixed",
          top: "0",
          left: "0",
          width: "100%",
          zIndex: "100",
        }}
        mode="light"
        leftContent={[<Icon type="left" key="1" onClick={() => goBack()} />]}
      >
        商品详情
      </NavBar>
      <div style={{ padding: "45px 0vw 10px", background: "#fff" }}>
        <Carousel autoplay={false} infinite>
          {pro.pics
            ? pro.pics.map((item, index) => (
                <div
                  key={index}
                  /*  href="#" */
                  style={{
                    display: "inline-block",
                    textAlign: "center",
                    width: "100%",
                    height: imgHeight,
                  }}
                >
                  <img
                    src={item.pic_url}
                    alt=""
                    style={{ width: "60%", verticalAlign: "top" }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event("resize"));
                      setHeight({ imgHeight: "auto" });
                    }}
                  />
                </div>
              ))
            : ""}
        </Carousel>
      </div>
      <div style={{ padding: "10px 10px 0", background: "#fff" }}>
        <div style={{ fontSize: "20px", color: "red" }}>
          ¥{pro.price_origin}
          {pro.place_origin ? (
            <Tag
              style={{
                marginTop: "5px",
                color: "red",
                background: "#f8c9cb",
                float: "right",
              }}
              small
            >
              {pro.place_origin}
            </Tag>
          ) : (
            ""
          )}
        </div>
        <div>
          {pro.promotion_prices
            ? pro.promotion_prices.map((item, index) => (
                <Tag
                  key={index}
                  style={{
                    margin: "10px",
                    color: "red",
                    background: "#f8c9cb",
                  }}
                  small
                >
                  {item}
                </Tag>
              ))
            : ""}
        </div>
        <div
          style={{
            fontSize: "16px",
            lineHeight: "20px",
            overFlow: "hidden",
            fontWeight: "bold",
            wordBreak: "break-all",
            marginTop: "5px",
          }}
        >
          {pro.name}
        </div>
        <div>
          <Tag
            style={{
              margin: "10px",
              color: "#f47a25",
              background: "#fed7a6",
            }}
          >
            {pro.store_stock_level_text}
          </Tag>
        </div>
      </div>
      {pro.promotions ? (
        <div
          style={{ marginTop: "10px", background: "#fff", minHeight: "37px" }}
        >
          <div style={{ paddingLeft: "50px", position: "relative" }}>
            <div
              style={{
                position: "absolute",
                left: "10px",
                top: "12px",
                fontSize: "13px",
                color: "#c5c4c9",
              }}
            >
              优惠
            </div>
            <ul style={{ padding: "10px 0" }}>
              {pro.promotions.map((item, index) => (
                <li
                  key={index}
                  style={{
                    fontSize: "12px",
                    lineHeight: "20px",
                    maxHeight: "40px",
                    overflow: "hidden",
                  }}
                >
                  <Tag
                    style={{
                      marginRight: "10px",
                      color: "red",
                      background: "#f8c9cb",
                    }}
                    small
                  >
                    {item.label}
                  </Tag>
                  {item.title}
                </li>
              ))}
            </ul>
          </div>
        </div>
      ) : (
        ""
      )}
      <div style={{ marginTop: "10px", background: "#fff", minHeight: "37px" }}>
        <div style={{ paddingLeft: "50px", position: "relative" }}>
          <div
            style={{
              position: "absolute",
              left: "10px",
              top: "12px",
              fontSize: "13px",
              color: "#c5c4c9",
            }}
          >
            规格
          </div>
          <ul style={{ padding: "10px 0" }}>
            {pro.group_products
              ? pro.group_products.map((item, index) => (
                  <Tag
                    key={index}
                    style={{
                      margin: "0px 10px 10px 0",
                      color: "red",
                      whiteSpace: "nowrap",
                      overflow: "hidden",
                      maxWidth: "250px",
                      background: "#f8c9cb",
                    }}
                    small
                  >
                    {item.title && item.title.length > 30
                      ? item.title.slice(0, 30) + "..."
                      : item.title}
                  </Tag>
                ))
              : ""}
          </ul>
        </div>
      </div>
      <div
        style={{ margin: "10px 0 10px", background: "#fff", padding: "10px" }}
      >
        <div
          style={{ fontSize: "15px", fontWeight: "bold", lineHeight: "30px" }}
        >
          商品介绍
        </div>
        <div
          style={{ lineHeight: "20px", fontSize: "14px" }}
          dangerouslySetInnerHTML={{
            __html: pro.description ? pro.description.split("商品货号")[0] : "",
          }}
        ></div>
      </div>
    </div>
  );
};
export default connect(({ content }) => ({ content }))(withRouter(Detail));
